<template>
  <div class="detail">
    <Come-back-home :isLine="isLine"
                    class="home-come"><span>领50元电影票</span></Come-back-home>
    <div class="flex">
      <img src="../../../assets/images/share-icon.png"
           alt="无法加载图片">
      <button>特惠购票</button>
    </div>
    <div class="detailcontext">
      <div class="title">猫眼电影 > <span class="moivetitle">你好,李焕英</span></div>
      <div class="movie-info-top">
        <div class="img">
          <img class="main_img"
               src="https://p1.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@300w_414h_80q_1e_1c"
               alt="无法显示图片">
          <img class="lb-tran"
               src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png"
               alt="无法显示图片">
        </div>
        <div class="movecover">
          <h3 class="moviename">你好，李焕英</h3>
          <p class="moviediscribation">
            Hi,Mom<br>喜剧/剧情<br>贾玲/张小斐/沈腾<br>2021-02-12 08:00中国大陆上映/ 128分钟 >
          </p>
          <div class="btns">
            <button class="wish"><i class="iconfont "></i>想看</button>
            <button class="looked"><i class="iconfont "></i>看过</button>
          </div>
        </div>
      </div>
      <div class="rate-li">
        <div class="top">
          <div class="rate-name">
            <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo.png"
                 alt="无法加载图片">
            <span>猫眼购票评分</span>
          </div>
          <div class="wish">
            <span class="wishes">1,162,302</span>
            人想看
          </div>
          <div class="looked">
            <span class="looking">120,821,873</span>
            人看过 >
          </div>
        </div>
        <div class="btn">
          <div class="one">
            <div class="shows">
              <div class="num">9.5</div>
              <div class="ping"><span>2,389,920</span>人评</div>
            </div>
            <div class="rates">
              <div class="wuxin xins"><span>☆☆☆☆☆</span>
                <div class="rateparent">
                  <div class="selectnum"></div>
                </div>
              </div>
              <div class="sixin xins"><span>☆☆☆☆</span>
                <div class="rateparent">
                  <div class="selectnum"></div>
                </div>
              </div>
              <div class="sanxin xins"><span>☆☆☆</span>
                <div class="rateparent">
                  <div class="selectnum"></div>
                </div>
              </div>
              <div class="erxin xins"><span>☆☆</span>
                <div class="rateparent">
                  <div class="selectnum"></div>
                </div>
              </div>
              <div class="yixin xins"><span>☆</span>
                <div class="rateparent">
                  <div class="selectnum"></div>
                </div>
              </div>

            </div>
          </div>
          <div class="two">
            <div class="box">
              <span class="lt">TOP<br>1</span>
              <span class="rt">
                <span class="title">2021年2月</span><br>
                <span class="text">中国大陆票房榜</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="jianjie">
        <div class="title">
          <div class="head">简介</div>
          <div class="switch"
               @click="isOpen=!isOpen">展开 <i class="iconfont "></i></div>
        </div>
        <div class="context"
             :style="{'-webkit-line-clamp':isOpen?8:3}">
          2001年的某一天，刚刚考上大学的贾晓玲（贾玲 饰）经历了人生中的一次大起大落。一心想要成为母亲骄傲的她却因母亲突遭严重意外，而悲痛万分。在贾晓玲情绪崩溃的状态下，竟意外的回到了 1981 年，并与年轻的母亲李焕英（张小斐 饰）相遇，二人形影不离，宛如闺蜜。与此同时，也结识了一群天真善良的好朋友。晓玲以为来到了这片“广阔天地”，她可以凭借自己超前的思维，让母亲“大有作为”，但结果却让晓玲感到意外......
        </div>
      </div>
      <div class="actors">
        <div class="head">
          <div class="actor">演职人员</div>
          <div class="all">
            全部<i class="iconfont "></i>
          </div>
        </div>
        <div class="photoes">
          <div class="people">
            <img src="https://p1.meituan.net/movie/21be0ac9b672915807a9d303b11bed9e171181.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">贾玲</div>
            <div class="job">导演</div>
          </div>
          <div class="people">
            <img src="https://p1.meituan.net/movie/21be0ac9b672915807a9d303b11bed9e171181.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">贾玲</div>
            <div class="job">贾晓玲</div>
          </div>
          <div class="people">
            <img src="https://p1.meituan.net/moviemachine/343d5e99af59d269a74f541f91c1f96e167598.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">张小斐</div>
            <div class="job">饰 李焕英</div>
          </div>
          <div class="people">
            <img src="https://p1.meituan.net/moviemachine/798344498dd685ecac377f6c1f684567193741.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">沈腾</div>
            <div class="job">饰 沈光林</div>
          </div>
          <div class="people">
            <img src="https://p1.meituan.net/movie/961d75fd7042e45ed39be87f40284a9937407.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">陈赫</div>
            <div class="job">饰 冷特</div>
          </div>
          <div class="people">
            <img src="https://p0.meituan.net/movie/bc7d7066cce19eb600212ddcb503462f169244.jpg@160w_224h_80q_1e_1c"
                 alt="">
            <div class="name">刘佳</div>
            <div class="job">饰 李焕英(妈妈)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isLine: true,
      isOpen: false
    }
  }
}
</script>
<style lang="scss" scoped>
.detail.tab-show {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .flex {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 62px;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      margin: 0 40px 0 24px;
    }
    button {
      width: 318px;
      height: 45px;
      background-color: #fb3333;
      color: #fff;
      font-size: 17.5px;
      text-align: center;
      list-style: 45px;
      border-radius: 1.5rem;
    }
  }
  .detailcontext {
    background-color: #662e29;
    flex: 1;
    overflow-y: scroll;
    padding: 21.63px 16.48px;
    margin-bottom: 50px;
    .title {
      color: #ccc;
      font-size: 14px;
      margin-bottom: 15.45px;
    }
    .movie-info-top {
      display: flex;
      margin-bottom: 20px;
      .img {
        width: 103px;
        height: 142.14px;
        position: relative;
        .main_img {
          width: 103px;
        }
        .lb-tran {
          position: absolute;
          width: 30.9px;
          bottom: 0;
          left: 0;
        }
      }
      .movecover {
        margin-left: 0.84rem;
        color: #fff;
        flex: 1;
        .moviename {
          font-size: 20.6px;
          font-weight: bold;
        }
        .moviediscribation {
          font-size: 13px;
          opacity: 0.6;
        }
        .btns {
          height: 30px;
          display: flex;
          justify-content: space-between;
          margin-top: 4px;
          button {
            flex: 1;
            border-radius: 5px;
            background-color: rgba($color: #fff, $alpha: 0.4);
          }
          .looked {
            margin-left: 15px;
          }
        }
      }
    }
    .rate-li {
      width: 100%;
      height: 130px;
      border-radius: 5px;
      padding: 8px 12px;
      background-color: rgba($color: #000000, $alpha: 0.3);
      .top {
        display: flex;
        color: #fff;
        font-size: 12px;
        .rate-name {
          display: flex;
          align-items: center;
          img {
            width: 14.41px;
            height: 14.41px;
            margin-right: 5px;
          }
        }
        .wish {
          margin-left: 45px;
          opacity: 0.6;
        }
        .looked {
          margin-left: 10px;
          opacity: 0.6;
        }
      }
      .btn {
        display: flex;
        color: #fff;
        opacity: 0.6;
        font-size: 12px;
        .one {
          width: 288px;
          height: 28px;
          display: flex;
          .shows {
            width: 94px;
            text-align: center;
            margin-top: 12px;
            .num {
              color: #ffb400;
              opacity: 1;
              font-size: 22.6px;
            }
          }
          .rates {
            text-align: right;
            .xins {
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                display: block;
                width: 48px;
              }
              .rateparent {
                width: 80px;
                height: 3px;
                margin-left: 5px;
                background-color: rgba($color: #fff, $alpha: 0.6);
                .selectnum {
                  width: 30px;
                  background-color: sandybrown;
                  height: 3px;
                }
              }
            }
            .wuxin {
              .selectnum {
                width: 8px !important;
              }
            }
            .sixin {
              .selectnum {
                width: 20px !important;
              }
            }
            .sanxin {
              .selectnum {
                width: 13px !important;
              }
            }
            .erxin {
              .selectnum {
                width: 60px !important;
              }
            }
            .yixin {
              .selectnum {
                width: 10px !important;
              }
            }
          }
        }
        .two {
          padding: 20px 15px;
          .box {
            background-image: linear-gradient(
              270deg,
              rgba(223, 224, 138, 0.15),
              rgba(255, 168, 65, 0.25)
            );
            display: flex;
            width: 111px;
            .lt {
              opacity: 1 !important;
              font-size: 13px;
              color: #fff;
              background-image: url("https://p1.meituan.net/scarlett/6f61e9c892207f4c77500657a673c93412018.png@80q");
            }
            .rt {
              .title {
                font-size: 12px;
                text-indent: 5px;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
    .jianjie {
      margin: 20px 0;
      .title {
        display: flex;
        justify-content: space-between;
        opacity: 1 !important;
        .head {
          font-size: 16px;
        }
      }
      .context {
        color: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        // height: 50px;
      }
    }
    .actors {
      .head {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        color: #fff;
      }
      .photoes {
        display: flex;
        align-items: center;
        overflow-x: scroll;
        .people {
          width: 84.5px;
          height: 100%;
          margin-right: 10px;
          text-align: center;
          img {
            width: 82px;
          }
          .name {
            color: #fff;
          }
          .job {
            color: rgba($color: #fff, $alpha: 0.6);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
